<script lang="tsx" setup>
import { ConfigService } from "@/api/system/config";
import { useDialog } from "@/components/dialog";
import { useForm } from "@/components/form";
import { $t } from "@/locales";
import { templateField, transformData } from "../schemas";

const data = ref();

const fieldLink = {
  root: "存储目录",
  secretId: "secretId",
  accessKey: "accessKey",
  accessKeyId: "accessKeyId",
  secretKey: "secretKey",
  key: "key",
  accessKeySecret: "accessKeySecret",
  secret: "secret",
  bucket: "桶名称",
  dirname: "目录名称",
  domain: "域名地址",
  endpoint: "Endpoint",
  region: "区域",
  acl: "Acl",
  remark: "备注",
};

const [BasicForm, formApi] = useForm({
  labelPosition: "right",
  labelWidth: "140px",
  schema: [
    {
      prop: "mode",
      label: "",
      component: "Input",
      ifShow: false,
    },
    {
      prop: "root",
      label: $t("system.config.upload.extend.root"),
      component: "RadioGroup",
      rules: [
        {
          required: true,
        },
      ],
      componentProps: {
        placeholder: "",
        allowClear: true,
        options: [
          {
            label: "不公开（runtime目录）",
            value: "runtime",
          },
          {
            label: "公开（public目录）",
            value: "public",
          },
        ],
      },
      ifShow: (values: any) => {
        if (values) {
          return ["local"].includes(values.mode);
        }
        return false;
      },
    },
    {
      component: "Input",
      prop: "secretId",
      label: $t("system.config.upload.extend.secretId"),
      rules: [
        {
          required: true,
        },
      ],
      ifShow: (values: any) => {
        if (values) {
          return ["cos"].includes(values.mode);
        }
        return false;
      },
    },
    {
      component: "Input",
      prop: "accessKey",
      label: $t("system.config.upload.extend.accessKey"),
      rules: [
        {
          required: true,
        },
      ],
      ifShow: (values: any) => {
        if (values) {
          return ["qiniu"].includes(values.mode);
        }
        return false;
      },
    },
    {
      component: "Input",
      prop: "accessKeyId",
      label: $t("system.config.upload.extend.accessKeyId"),
      rules: [
        {
          required: true,
        },
      ],
      ifShow: (values: any) => {
        if (values) {
          return ["oss"].includes(values.mode);
        }
        return false;
      },
    },
    {
      component: "Input",
      prop: "secretKey",
      label: $t("system.config.upload.extend.secretKey"),
      rules: [
        {
          required: true,
        },
      ],
      ifShow: (values: any) => {
        if (values) {
          return ["cos", "qiniu"].includes(values.mode);
        }
        return false;
      },
    },
    {
      component: "Input",
      prop: "key",
      label: $t("system.config.upload.extend.key"),
      rules: [
        {
          required: true,
        },
      ],
      ifShow: (values: any) => {
        if (values) {
          return ["s3"].includes(values.mode);
        }
        return false;
      },
    },
    {
      component: "Input",
      prop: "accessKeySecret",
      label: $t("system.config.upload.extend.accessKeySecret"),
      rules: [
        {
          required: true,
        },
      ],
      ifShow: (values: any) => {
        if (values) {
          return ["oss"].includes(values.mode);
        }
        return false;
      },
    },
    {
      component: "Input",
      prop: "secret",
      label: $t("system.config.upload.extend.secret"),
      rules: [
        {
          required: true,
        },
      ],
      ifShow: (values: any) => {
        if (values) {
          return ["s3"].includes(values.mode);
        }
        return false;
      },
    },
    {
      component: "Input",
      prop: "bucket",
      label: $t("system.config.upload.extend.bucket"),
      rules: [
        {
          required: true,
        },
      ],
      ifShow: (values: any) => {
        if (values) {
          return ["oss", "cos", "qiniu", "s3"].includes(values.mode);
        }
        return false;
      },
    },
    {
      component: "Input",
      prop: "dirname",
      label: $t("system.config.upload.extend.dirname"),
      rules: [
        {
          required: true,
        },
      ],
    },
    {
      component: "Input",
      prop: "domain",
      label: $t("system.config.upload.extend.domain"),
      rules: [
        {
          required: true,
        },
      ],
      ifShow: (values: any) => {
        if (values) {
          return ["local", "oss", "cos", "qiniu", "s3"].includes(values.mode);
        }
        return false;
      },
    },

    {
      component: "Input",
      prop: "endpoint",
      label: $t("system.config.upload.extend.endpoint"),
      ifShow: (values: any) => {
        if (values) {
          return ["oss", "qiniu", "s3"].includes(values.mode);
        }
        return false;
      },
    },

    {
      component: "Input",
      prop: "region",
      label: $t("system.config.upload.extend.region"),
      ifShow: (values: any) => {
        if (values) {
          return ["cos", "s3"].includes(values.mode);
        }
        return false;
      },
    },
    {
      component: "Input",
      prop: "acl",
      label: $t("system.config.upload.extend.acl"),
      ifShow: (values: any) => {
        if (values) {
          return ["s3"].includes(values.mode);
        }
        return false;
      },
    },
    {
      component: "Input",
      componentProps: {
        type: "textarea",
        rows: 5,
      },
      prop: "remark",
      label: $t("system.config.upload.extend.remark"),
    },
  ],
});

const [Dialog, dialogApi] = useDialog({
  title: "更多设置",
  width: "50%",
  modal: true,
  dialogType: "drawer",
  direction: "rtl",
  closeOnClickModal: true,
  destroyOnClose: true,
  async onConfirm() {
    const values = await formApi.getValues();
    const field = templateField(data.value.mode);
    let datas = transformData(
      values,
      ["btn"],
      field,
      { group_code: data.value.mode },
      fieldLink
    );
    if (field.length == 0) {
      datas = [];
    }
    ConfigService.save(datas).then(() => {
      ElMessage.success($t("common.operation_success"));
      retrieveData();
    });
  },
});

/**
 * 获取配置信息
 */
const retrieveData = async function () {
  const record = (await ConfigService.get({ group_code: data.value.mode })) as any;
  await formApi.setValues({ ...record, mode: data.value.mode });
};

defineExpose({
  show(args: any) {
    data.value = args;
    dialogApi.setState({
      title: `更多设置`,
    });
    dialogApi.open();
    nextTick(async () => {
      retrieveData();
    });
  },
});
</script>
<template>
  <Dialog title="更多设置" class="w-[650px]">
    <BasicForm />
  </Dialog>
</template>
